<template>
 <div>
   <div>
    <!-- v-on可以简写为@，主要是用来绑定事件的 -->
    <!-- 事件修饰符 .prevent  .stop -->
    <!-- 按键事件：keyup -->
    <!-- 按键修饰符 .enter .esc 两个常用的 -->
    <!-- 第一种：click里面可以写少量语句 -->
     <!-- <button v-on:click='num+=1'>按钮</button> -->
     <!-- click后面跟上methods中定义好的函数 -->
     <!-- <button v-on:click='fn'>按钮</button> -->
     <!-- 第三种：click后面跟上methods中定义好的函数   v-on:事件名='methods中的函数名（实参）' -->
     <!-- <button @click='fn1'>按钮</button> -->
        <button  @click='fn1(3000)'>发工资啦，我的工资是3000<br></button>
        <button @click='fn1(-2800)'>给喜欢的女主播刷了火箭-2800</button>
        <button @click='fn1(10000)'>送外卖赚了10000</button>
        <button @click='fn1(-18000)'>给暗恋的女生买了爱马仕-18000</button>
        <button @click='fn1(8000)'>晚上去做代驾赚了8000</button>
        <button @click='fn1(-100)'>买泡面100</button>
        <button @click='fn1(-50)'>买挂逼水50</button>
        <p>{{num}}</p>
   </div>
 </div>
</template>
 
<script>
export default {
  
  data() {
    return {
      num:0,
    }
  },
  // methods 用来存放事件，是一个对象，里面存放了需要触发的时间
    // 带有s。事件很多，所以是复数形式后面跟上s
   methods:{
      fn(){
        // this指的是该组件实例
        console.log(this);
        
        console.log(this.num)
      },
      fn1(num){
        this.num+=num
        console.log(this.num);
        
      }
    }
};
</script>

<style scoped>
     
</style>